/// <reference path="references.scss" />


// COMMON
// ------------------------------------------------------------

@if $modal-content-border-width == 0 {
    .modal-dialog:not(.modal-flex) {
	    .modal-header {
            // Reset header bottom padding if header is "floating"
            padding-bottom: 0;
	    }

        @if $modal-footer-bg == null or $modal-footer-bg == transparent {
            .modal-footer {
                // Reset footer top padding if footer is "floating"
                padding-top: 0;
            }
        }
    }
}

@if $modal-footer-bg != null and $modal-footer-bg != transparent {
    .modal-footer {
        // Too much y-padding with colored footer looks bad
        padding-block: calc(var(--modal-padding) * 0.5);
    }
}


// FLEX MODAL
// ------------------------------------------------------------

.modal-has-backdrop {
    --modal-backdrop-bg: #{$modal-backdrop-bg};
    --modal-backdrop-opacity: #{$modal-backdrop-opacity};
    --modal-backdrop-blur: 4px;

    &.modal-backdrop-inverse {
        --modal-backdrop-bg: #{invert($modal-backdrop-bg)};
    }

    &.modal-backdrop-invisible {
        --modal-backdrop-opacity: 0;

        .modal-backdrop.fade {
            transition-duration: 0s !important;
        }
    }

    // INFO: Setting filter on backdrock may have strange effects on underlying fixed positioned elements.
    //&:not(.modal-backdrop-invisible) {
    //    #page {
    //        transition: filter 0.175s linear;
    //    }

	   // &.modal-open #page {
		    // Fade in
		  //  filter: blur(var(--modal-backdrop-blur));
	   // }

	   // &.modal-hiding #page {
		    // Fade out
		  //  filter: blur(0);
	   // }
    //}
}

.modal-backdrop {
    background-color: var(--modal-backdrop-bg);

    &.fade {
        transition: opacity 0.175s linear;

        &.show {
            opacity: var(--modal-backdrop-opacity);
        }
    }
}

.modal.fade {
    .modal-dialog {
		transition-property: opacity, transform;
        transform: translate(0, 30px) scale(0.95, 0.95);
        will-change: transform, opacity;
    }

    &.show .modal-dialog {
        transform: translate(0, 0) scale(1, 1);
        opacity: 1;
    }
}

.modal-content {
	iframe {
		width: 100%;
	}
}

.modal-dialog:not(.modal-flex) iframe {
	min-height: 300px;
}

.modal-dialog-app > .modal-content {
    > .modal-body {
        padding: 0;
        overflow: hidden;
        border-radius: $modal-content-border-radius;
    }
}

.modal-closer {
	position: absolute;
	display: none;
	font-size: 1rem;
	padding: 10px;
	top: 0.5rem;
	right: 0.5rem;
    background-color: #fff;
    border-radius: 50%;
	z-index: $zindex-modal-backdrop + 1;

	//.modal[data-backdrop=true] > &,
    //.modal[data-backdrop=static] > & {
    //    filter: var(--btn-close-white-filter);
	//}
}

.modal-dialog.modal-flex {
	position: fixed;
	margin: 0;
	width: auto;
	height: auto;
	max-width: none;
	left: 1%;
	top: 1%;
	bottom: 1%;
	right: 1%;

	@include media-breakpoint-up(md) {
		left: 3%;
		right: 3%;
		top: 2%;
		bottom: 2%;

		&.modal-dialog-app {
			right: 2.5rem;
		}
	}

	@include media-breakpoint-up(xl) {
		&.modal-dialog-app {
			right: 3%;
		}
	}

	&.modal-flex-sm {
		@media (min-width: 800px) {
			left: calc((100% / 2) - 400px);
			right: calc((100% / 2) - 400px);
		}
	}

	.modal-content {
		max-height: none;
		overflow-y: auto;
		overflow-x: hidden;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.modal-body {
		display: flex;
		flex-basis: 0;
		flex-grow: 1;
		flex-direction: column;
		overflow: auto;
		max-width: 100%;
		min-height: 1px;
	}

	.modal-flex-fill-area {
		min-height: 100%;
		flex: 1;
	}
}


// Alert / Confirm / Prompt
// ------------------------------------------------------------

.modal.modal-box {
	overflow-y: hidden;

	.modal-header {
		border-bottom-width: 1px;
		padding-block: 0.75rem;
	}

	.modal-footer > .btn {
		min-width: 90px;
	}

	.modal-box-body {
		align-items: start;
		flex-wrap: wrap;

		> div + .modal-box-input {
			padding-top: 1rem;
		}
	}

	.modal-box-message b {
		font-weight: $font-weight-medium;
	}

	.modal-footer {
		justify-content: flex-end;
	}

	.modal-box-center {
		.modal-box-body {
			flex-direction: column;
			align-items: center;
		}

		.modal-box-message {
			text-align: center;
		}

		.modal-footer {
			justify-content: center;
		}
	}
}